import React, { useState, useEffect } from 'react';
import { ShoppingBagIcon, CashIcon } from "@heroicons/react/outline";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faMoneyBill } from "@fortawesome/free-solid-svg-icons";
import { FaDollarSign, FaTachometerAlt } from 'react-icons/fa';
import { BiChevronRight } from 'react-icons/bi';
import { Link, useNavigate, NavLink } from 'react-router-dom';
import { faBuilding } from "@fortawesome/free-regular-svg-icons";
import Navbar from "../Navbar.jsx";
import Sidebar from "../Sidebar.jsx";
import autoTable from 'jspdf-autotable';
import * as XLSX from 'xlsx';
import { jsPDF } from "jspdf";
import Select from 'react-select';
import axios from 'axios';
import LoadingScreen from "../../Loading";

const PurchaseOverview = () => {
  const navigate = useNavigate();
  const [warehouses, setWarehouses] = useState([]);
  const [warehouse, setWarehouse] = useState("all");
  const [startDate, setStartDate] = useState("");
  const [endDate, setEndDate] = useState("");
  const [isSidebarOpen, setSidebarOpen] = useState(true);
  const [searchTerm, setSearchTerm] = useState("");
  const [entriesPerPage, setEntriesPerPage] = useState(10);
  const [currentPage, setCurrentPage] = useState(1);
  const [salesList, setSalesList] = useState([]);
  const [grandTotal, setGrandTotal] = useState(0);
  const [paidPayment, setPaidPayment] = useState(0);
  const [loading, setLoading] = useState(false);
  const [actionMenu, setActionMenu] = useState(null);
  // New states for payment type editing
  const [paymentTypes, setPaymentTypes] = useState([]);
  const [editPaymentModal, setEditPaymentModal] = useState(false);
  const [selectedInvoice, setSelectedInvoice] = useState(null);
  const [newPaymentType, setNewPaymentType] = useState(null);
  const [cashSalesTotal, setCashSalesTotal] = useState(0);
  const [bankSalesTotal, setBankSalesTotal] = useState(0);

  // Get today's date in YYYY-MM-DD format
  const today = new Date().toISOString().slice(0, 10);

  // Fetch payment types
  const fetchPaymentTypes = async () => {
    const token = localStorage.getItem("token");
    if (!token) {
      console.log("No token found for payment types");
      return;
    }
    try {
      const response = await axios.get("https://mybackend-l7om.onrender.com/api/payment-types", {
        headers: { Authorization: `Bearer ${token}` },
      });
      if (response.data.data) {
        const formattedPaymentTypes = response.data.data.map(pt => ({
          label: pt.paymentTypeName,
          value: pt._id,
        }));
        setPaymentTypes(formattedPaymentTypes);
        console.log("Fetched payment types:", formattedPaymentTypes);
      }
    } catch (error) {
      console.error("Error fetching payment types:", error.message);
      alert(`Failed to load payment types: ${error.message}`);
    }
  };

  // Handler for View Sales
  const handleViewSales = (inv) => {
    navigate(`/view-sale?id=${inv._id}&source=${inv.source}`);
  };

  // Navigate to Edit page (AddSale or POS) only if sale is from today
  const handleEdit = (inv) => {
  const created = new Date(inv.saleDate);
  const now = new Date();
  const diffDays = (now - created) / (1000*60*60*24);
  if (diffDays > 2) {
    return alert("You can only edit invoices up to 7 days old.");
  }
    if (inv.source === "Sale") {
      navigate(`/add-sale?id=${inv._id}`);
    } else {
      navigate(`/pos?id=${inv._id}`);
    }
  };

  // New function to edit payment type
  const handleEditPaymentType = (inv) => {
    const saleDate = new Date(inv.saleDate).toISOString().slice(0, 10);
    console.log(`Checking edit payment type for invoice ${inv._id}: saleDate=${saleDate}, today=${today}`);
    if (saleDate !== today) {
      alert("Editing payment type is only allowed for invoices from today.");
      return;
    }
    setSelectedInvoice(inv);
    setNewPaymentType(null); // Reset selection
    setEditPaymentModal(true);
  };

  // Save new payment type
  const savePaymentType = async () => {
    if (!newPaymentType) {
      alert("Please select a payment type.");
      return;
    }
    setLoading(true);
    try {
      const token = localStorage.getItem("token");
      const endpoint = selectedInvoice.source === "Sale"
       ? `https://mybackend-l7om.onrender.com/api/sales/${selectedInvoice._id}/paymentType`
       : `https://mybackend-l7om.onrender.com/api/pos/${selectedInvoice._id}/paymentType`;
      await axios.put(endpoint, { paymentType: newPaymentType.value }, {
        headers: { Authorization: `Bearer ${token}` },
      });
      alert("Payment type updated successfully!");
      setEditPaymentModal(false);
      setSelectedInvoice(null);
      setNewPaymentType(null);
      await fetchInvoices(); // Refresh sales list
    } catch (error) {
      console.error("Error updating payment type:", error.message);
      alert(`Failed to update payment type: ${error.message}`);
    } finally {
      setLoading(false);
    }
  };

  // Navigate to "View Payments" page
  const handleViewPayments = (inv) => {
    navigate(`/view-payment?saleId=${inv._id}`);
  };

  // Navigate to "Receive Payment" form
  const handleReceivePayment = (inv) => {
    navigate(`/receive-payment?invoice=${inv.saleCode}`);
  };

  // Fetch invoice details and generate PDF
  const handleDownloadPDF = async (inv) => {
    setLoading(true);
    try {
      const token = localStorage.getItem("token");
      if (!token) {
        alert("No token found, please log in");
        navigate('/login');
        return;
      }

      const endpoint = inv.source === "Sale" 
        ? `https://mybackend-l7om.onrender.com/api/sales/${inv._id}` 
        : `https://mybackend-l7om.onrender.com/api/pos/${inv._id}`;
      const { data } = await axios.get(endpoint, {
        headers: { Authorization: `Bearer ${token}` },
      });

      const paymentsResponse = await axios.get(`https://mybackend-l7om.onrender.com/api/payments/${inv._id}`, {
        headers: { Authorization: `Bearer ${token}` },
      });
      const payments = paymentsResponse.data.payments || [];

      generateInvoicePDF(data, payments, inv.source);
    } catch (error) {
      console.error("Error generating PDF:", error);
      alert(`Failed to generate PDF: ${error.message}`);
    } finally {
      setLoading(false);
    }
  };

  // Generate PDF for the invoice and open in new tab
  const generateInvoicePDF = (invoice, payments, source) => {
    const doc = new jsPDF();

    doc.setFontSize(20);
    doc.text("Invoice", 14, 20);
    doc.setFontSize(12);
    doc.text(`Invoice #: ${invoice.saleCode || 'N/A'}`, 14, 30);
    doc.text(`Date: ${new Date(invoice.saleDate).toLocaleDateString()}`, 14, 38);
    doc.text(`Source: ${source}`, 14, 46);

    doc.setFontSize(14);
    doc.text("Customer Information", 14, 60);
    doc.setFontSize(12);
    doc.text(`Name: ${invoice.customer?.customerName || 'N/A'}`, 14, 70);
    doc.text(`Mobile: ${invoice.customer?.mobile || 'N/A'}`, 14, 78);
    const addrObj = invoice.customer?.address || {};
    const addrStr = [
      addrObj.street,
      addrObj.city,
      addrObj.state,
      addrObj.zip,
      addrObj.country
    ].filter(part => part).join(', ');
    doc.text(`Address: ${addrStr || 'N/A'}`, 14, 86);

    doc.setFontSize(14);
    doc.text("Items", 14, 100);
    const items = invoice.items || [];
    const itemRows = items.map(item => [
      item.item?.itemName || 'N/A',
      item.quantity || 0,
      `Rs. ${(item.unitPrice || item.price || 0).toFixed(2)}`,
      `Rs. ${(item.discount || 0).toFixed(2)}`,
      `Rs. ${(item.subtotal || ((item.unitPrice || item.price || 0) * (item.quantity || 0) - (item.discount || 0))).toFixed(2)}`,
    ]);

    autoTable(doc, {
      startY: 106,
      head: [['Item Name', 'Quantity', 'Unit Price', 'Discount', 'Subtotal']],
      body: itemRows,
      theme: 'striped',
      styles: { fontSize: 10 },
      headStyles: { fillColor: [0, 123, 255] },
    });

    let finalY = doc.lastAutoTable.finalY || 106;
    doc.setFontSize(12);
    doc.text(`Subtotal: Rs. ${(invoice.subtotal || invoice.totalAmount || 0).toFixed(2)}`, 14, finalY + 10);
    if (invoice.discountOnBill || invoice.totalDiscount) {
      doc.text(`Discount: Rs. ${(invoice.discountOnBill || invoice.totalDiscount || 0).toFixed(2)}`, 14, finalY + 18);
    }
    doc.text(`Grand Total: Rs. ${(invoice.grandTotal || invoice.totalAmount || 0).toFixed(2)}`, 14, finalY + 26);

    if (payments.length > 0) {
      finalY = finalY + 34;
      doc.setFontSize(14);
      doc.text("Payments", 14, finalY);
      const paymentRows = payments.map(payment => [
        new Date(payment.paymentDate).toLocaleDateString(),
        payment.paymentType?.paymentTypeName || 'N/A',
        `Rs. ${(payment.amount || payment.paymentAmount || 0).toFixed(2)}`,
        payment.paymentNote || '-',
      ]);

      autoTable(doc, {
        startY: finalY + 6,
        head: [['Date', 'Payment Type', 'Amount', 'Note']],
        body: paymentRows,
        theme: 'striped',
        styles: { fontSize: 10 },
        headStyles: { fillColor: [0, 123, 255] },
      });

      finalY = doc.lastAutoTable.finalY;
      const totalPaid = payments.reduce((sum, p) => sum + (p.amount || p.paymentAmount || 0), 0);
      doc.setFontSize(12);
      doc.text(`Total Paid: Rs. ${totalPaid.toFixed(2)}`, 14, finalY + 10);
      const dueAmount = (invoice.grandTotal || invoice.totalAmount || 0) - totalPaid;
      doc.text(`Due Amount: Rs. ${dueAmount.toFixed(2)}`, 14, finalY + 18);
    }

    finalY = payments.length > 0 ? finalY + 26 : finalY + 34;
    doc.setFontSize(10);
    doc.setTextColor(150);
    doc.text("Thank you for your business!", 14, finalY + 10);
    doc.text("Generated by Grocery on Wheels", 14, finalY + 16);

    const pdfBlob = doc.output('blob');
    const pdfUrl = URL.createObjectURL(pdfBlob);
    window.open(pdfUrl, '_blank');
  };

  // POS invoice only for pos-orders
  const handlePOSInvoice = (inv) => {
    navigate(`/pos-invoice/${inv._id}`);
  };

  // Sales return
  const handleSalesReturn = (inv) => {
    navigate(`/sales-return?saleId=${inv._id}`);
  };

  useEffect(() => {
    if (window.innerWidth < 768) {
      setSidebarOpen(false);
    }
  }, []);

  // Fetch Warehouses and Payment Types
  const fetchWarehouses = async () => {
    const token = localStorage.getItem("token");
    if (!token) {
      console.log("No token found redirecting...");
      return;
    }
    setLoading(true);
    try {
      const response = await axios.get("https://mybackend-l7om.onrender.com/api/warehouses", {
        headers: { Authorization: `Bearer ${token}` },
      });
      if (response.data.data) {
        const newwarehouse = [
          { label: "All", value: "all" },
          ...response.data.data.map(warehouse => ({
            label: warehouse.warehouseName,
            value: warehouse._id,
          }))
        ];
        setWarehouses(newwarehouse);
      }
    } catch (error) {
      alert(error.message);
    } finally {
      setLoading(false);
    }
  };

  // Fetch unified Sales + POS orders
  const fetchInvoices = async () => {
    const token = localStorage.getItem("token");
    if (!token) {
      console.log("No token found redirecting...");
      return;
    }
    setLoading(true);
    try {
      const { data } = await axios.get(
        "https://mybackend-l7om.onrender.com/api/pos/invoices",
        { headers: { Authorization: `Bearer ${token}` } }
      );
      setSalesList(data);
    } catch (err) {
      alert(`Could not load invoices: ${err.message}`);
    } finally {
      setLoading(false);
    }
  };

  const handleDelete = async (id, source) => {
    const conf = window.confirm("Do you want to delete this sale?");
    if (!conf) {
      return;
    }
    setLoading(true);
    try {
      const endpoint = source === "POS" ? `https://mybackend-l7om.onrender.com/api/pos/${id}` : `https://mybackend-l7om.onrender.com/api/sales/${id}`;
      await axios.delete(endpoint, {
        headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
      });
      alert("Deleted Successfully");
    } catch (error) {
      console.error(error.message);
      alert(`Error deleting: ${error.message}`);
    } finally {
      fetchInvoices();
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchWarehouses();
    fetchInvoices();
    fetchPaymentTypes();
  }, []);
  useEffect(() => {
    let cash = 0, bank = 0;
    salesList.forEach(inv => {
      const p = inv.payments?.[0];
      const name = p?.paymentType?.paymentTypeName;
      if (name === "Cash")  cash += p.amount;
      if (name === "Bank")  bank += p.amount;
    });
    setCashSalesTotal(cash);
    setBankSalesTotal(bank);
  }, [salesList]);
  

  const filteredData = salesList.filter(item => {
    const searchTermLower = searchTerm.toLowerCase();
    const customerMatch =
      (typeof item.customer === 'string'
        ? item.customer.toLowerCase()
        : item.customer?.customerName?.toLowerCase())?.includes(searchTermLower) ||
      item.customer?.mobile?.toLowerCase().includes(searchTermLower) ||
      item.saleCode?.toLowerCase().includes(searchTermLower);
    const createdAtTime = new Date(item.saleDate).getTime();
    const startDateTime = startDate ? new Date(startDate).getTime() : 0;
    const endDateTime = endDate ? new Date(endDate).getTime() : Infinity;
    const dateMatch = createdAtTime >= startDateTime && createdAtTime <= endDateTime;
    const warehouseCondition = warehouse === "all" || warehouse === "" || item.warehouse?._id === warehouse;
    return (customerMatch && dateMatch) && warehouseCondition;
  });

  const totalInvoices = filteredData.length;
  const totalInvoiceAmt = filteredData.reduce((sum, inv) => sum + inv.amount, 0);
  const totalReceivedAmt = filteredData.reduce((sum, inv) => sum + inv.amount, 0);
  const totalSalesDue = totalInvoiceAmt - totalReceivedAmt;

  const handleCopy = () => {
    const data = filteredData
      .map(
        (inv) =>
          `${new Date(inv.saleDate).toDateString()}, ${inv.saleCode}, ${
            typeof inv.customer === 'string' ? inv.customer : inv.customer?.customerName || "N/A"
          }, ${inv.amount.toFixed(2)}, ${inv.source}`
      )
      .join('\n');
    navigator.clipboard.writeText(data);
    alert("Data copied to clipboard!");
  };

  const handleExcelDownload = () => {
    const ws = XLSX.utils.json_to_sheet(filteredData);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Invoices");
    XLSX.writeFile(wb, "invoices.xlsx");
  };

  const handlePdfDownload = () => {
    const doc = new jsPDF();
    doc.text("Invoices List", 20, 20);
    const tableData = filteredData.map(inv => [
      new Date(inv.saleDate).toDateString(),
      inv.saleCode,
      typeof inv.customer === 'string' ? inv.customer : inv.customer?.customerName || "N/A",
      inv.amount.toFixed(2),
      inv.source,
    ]);

    autoTable(doc, {
      head: [['Date', 'Code', 'Customer', 'Amount', 'Source']],
      body: tableData,
    });

    doc.save("invoice_list.pdf");
  };

  const handlePrint = () => {
    window.print();
  };

  const handleCsvDownload = () => {
    const csvContent = "data:text/csv;charset=utf-8," + filteredData.map(user => Object.values(user).join(",")).join("\n");
    const encodedUri = encodeURI(csvContent);
    const link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "invoices.csv");
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  const indexOfLastItem = currentPage * entriesPerPage;
  const indexOfFirstItem = indexOfLastItem - entriesPerPage;
  const totalPages = Math.ceil(filteredData.length / entriesPerPage);
  const currentUsers = filteredData.slice((currentPage - 1) * entriesPerPage, currentPage * entriesPerPage);

  const handlePageChange = (newPage) => {
    if (newPage >= 1 && newPage <= totalPages) {
      setCurrentPage(newPage);
    }
  };

  const handleEntriesChange = (e) => {
    setEntriesPerPage(Number(e.target.value));
    setCurrentPage(1);
  };

  const calculate = () => {
    const total = currentUsers.reduce((sum, inv) => sum + inv.amount, 0);
    const paid = total;
    setGrandTotal(total);
    setPaidPayment(paid);
  };

  useEffect(() => {
    calculate();
  }, [currentUsers]);

  if (loading) return (<LoadingScreen />);

  return (
    <div className="flex flex-col">
      <Navbar isSidebarOpen={isSidebarOpen} setSidebarOpen={setSidebarOpen} />
      <div className="box-border flex min-h-screen">
        <div className="w-auto">
          <Sidebar isSidebarOpen={isSidebarOpen} />
        </div>
        <div className="flex flex-col p-2 md:p-2 w-full mx-auto overflow-x-auto">
          <header className="flex flex-col items-center justify-between px-2 py-2 mb-2 bg-gray-100 rounded-md shadow md:flex-row">
            <div className="flex items-baseline gap-1 text-center sm:flex-row sm:text-left">
              <h1 className="text-lg font-semibold truncate sm:text-xl">Invoices List</h1>
              <span className="text-xs text-gray-600 sm:text-sm">View/Search Invoices</span>
            </div>
            <nav className="flex flex-wrap items-center justify-center text-xs text-gray-500 sm:justify-start sm:text-sm sm:mt-0">
              <NavLink to="/dashboard" className="flex items-center text-gray-700 no-underline hover:text-cyan-600">
                <FaTachometerAlt className="mr-2 text-gray-500 hover:text-cyan-600" />
                Home
              </NavLink>
              <BiChevronRight className="mx-1 sm:mx-2" />
              <NavLink to="/sales-list" className="text-gray-700 no-underline hover:text-cyan-600">
                Invoices List
              </NavLink>
            </nav>
          </header>
          <div className="flex flex-col gap-4">
            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
              <div className="flex items-center text-black bg-white rounded-lg shadow-md">
                <ShoppingBagIcon className="w-16 text-white rounded bg-cyan-500" />
                <div className="flex flex-col justify-center ml-4">
                  <h2 className="text-xl">{totalInvoices}</h2>
                  <p className='font-bold'>Total Invoices</p>
                </div>
              </div>
              <div className="flex items-center text-black bg-white rounded-lg shadow-md">
                <FaDollarSign className='w-16 h-16 text-white rounded bg-cyan-500'/>
                <div className="flex flex-col justify-center ml-4">
                  <h2 className="text-xl">₹{totalInvoiceAmt.toFixed(2)}</h2>
                  <p className='font-bold'>Total Invoices Amount</p>
                </div>
              </div>
              <div className="flex items-center text-black bg-white rounded-lg shadow-md">
                
                <FontAwesomeIcon icon={faMoneyBill} className="w-16 h-16 text-white rounded bg-cyan-500" />
                <div className="flex flex-col justify-center ml-4">
                  <h2 className="text-xl">₹{totalReceivedAmt.toFixed(2)}</h2>
                  <p className='font-bold'>Total Received Amount</p>
                </div>
              </div>
              <div className="flex items-center text-black bg-white rounded-lg shadow-md">
                <CashIcon className="h-16 text-white rounded bg-cyan-500 w-18" />
                <div className="flex flex-col justify-center ml-4">
                  <h2 className="text-xl">₹{totalSalesDue.toFixed(2)}</h2>
                  <p className='font-bold'>Total Sales Due</p>
                </div>
              </div>
              <div className="summary-card">
  <h3>Cash Sales</h3>
  <p>₹{cashSalesTotal.toFixed(2)}</p>
</div>

<div className="summary-card">
  <h3>Bank Sales</h3>
  <p>₹{bankSalesTotal.toFixed(2)}</p>
</div>

            </div>
          </div>
          <div className="p-4 bg-white shadow-md rounded-md mt-3 border-t-4 border-cyan-500">
            <div className='flex items-center justify-between mb-10'>
              <div></div>
              <div className="flex items-end">
                <button
                  className="w-full px-4 py-2 text-white rounded-md bg-cyan-500 hover:bg-cyan-600"
                  onClick={() => navigate('/add-sale')}
                >
                  + Create Invoice
                </button>
              </div>
            </div>
            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
              <div>
                <label className="block font-semibold text-gray-700">
                  Warehouse <span className="text-red-500">*</span>
                </label>
                <Select
                  options={warehouses}
                  onChange={(selectedoption) => setWarehouse(selectedoption.value)}
                />
              </div>
              <div>
                <label className="block font-semibold text-gray-700">Customers</label>
                <input
                  type="text"
                  onChange={(e) => setSearchTerm(e.target.value)}
                  placeholder="Search Name/Mobile"
                  className="w-full p-2 border rounded-md"
                />
              </div>
              <div>
                <label className="block font-semibold text-gray-700">Users</label>
                <select className="w-full p-2 border rounded-md">
                  <option>All</option>
                  <option>Admin</option>
                  <option>Manager</option>
                </select>
              </div>
            </div>
            <div className="grid grid-cols-1 gap-4 mt-4 md:grid-cols-2">
              <div>
                <label className="block font-semibold text-gray-700">From Date</label>
                <div className="flex items-center p-2 border rounded-md">
                  <span className="mr-2">📅</span>
                  <input
                    type="date"
                    className="w-full outline-none"
                    onChange={(e) => setStartDate(e.target.value)}
                  />
                </div>
              </div>
              <div>
                <label className="block font-semibold text-gray-700">To Date</label>
                <div className="flex items-center p-2 border rounded-md">
                  <span className="mr-2">📅</span>
                  <input
                    type="date"
                    className="w-full outline-none"
                    onChange={(e) => setEndDate(e.target.value)}
                  />
                </div>
              </div>
            </div>
          </div>
          <div className="flex flex-col justify-between mt-4 mb-4 space-y-2 md:flex-row md:space-y-0 md:items-center">
            <div className="flex items-center space-x-2">
              <span className="text-sm">Show</span>
              <select
                className="p-2 text-sm border border-gray-300 rounded-md"
                value={entriesPerPage}
                onChange={handleEntriesChange}
              >
                <option>10</option>
                <option>20</option>
                <option>50</option>
              </select>
              <span className="text-sm">Entries</span>
            </div>
            <div className="flex flex-col gap-2 md:flex-row">
              <div className='flex items-center justify-between flex-1 gap-2'>
                <button onClick={handleCopy} className="px-3 py-2 text-sm text-white bg-cyan-500">Copy</button>
                <button onClick={handleExcelDownload} className="px-3 py-2 text-sm text-white bg-cyan-500">Excel</button>
                <button onClick={handlePdfDownload} className="px-3 py-2 text-sm text-white bg-cyan-500">PDF</button>
                <button onClick={handlePrint} className="px-3 py-2 text-sm text-white bg-cyan-500">Print</button>
                <button onClick={handleCsvDownload} className="px-3 py-2 text-sm text-white bg-cyan-500">CSV</button>
              </div>
              <input
                type="text"
                placeholder="Search"
                className="w-full p-2 text-sm border border-gray-300"
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>
          </div>
          <div className="mt-6 overflow-x-auto">
            <table className="min-w-full bg-white border border-gray-300 shadow-sm">
              <thead className="bg-gray-200">
                <tr>
                  {[
                    'Date', 'Code', 'Customer', 'Amount', 'Source', 'Status', 'Action'
                  ].map((header) => (
                    <th
                      key={header}
                      className="px-4 py-2 text-sm font-medium text-left border"
                    >
                      {header}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {currentUsers.length <= 0 ? (
                  <tr>
                    <td colSpan="7" className="p-4 text-center text-gray-500 border">
                      No data available in table
                    </td>
                  </tr>
                ) : (
                  currentUsers.map((inv) => (
                    <tr className="bg-gray-100" key={inv._id}>
                      <td className="border px-2 py-1">
                        {new Date(inv.saleDate).toLocaleDateString()}
                      </td>
                      <td className="border px-2 py-1">{inv.saleCode}</td>
                      <td className="border px-2 py-1">
                        {typeof inv.customer === 'string' ? inv.customer : inv.customer?.customerName || "N/A"}
                      </td>
                      <td className="border px-2 py-1">₹{inv.amount.toFixed(2)}</td>
                      <td className="border px-2 py-1">{inv.source}</td>
                      <td className="border px-2 py-1">
                        <span
                          className={`inline-block px-2 py-1 text-xs font-semibold rounded 
                            ${inv.paymentStatus === 'Paid'
                              ? 'bg-green-100 text-green-800'
                              : 'bg-red-100 text-red-800'}`}
                        >
                          {inv.paymentStatus}
                        </span>
                      </td>
                      <td className="relative p-2 border">
                        <button
                          className={`flex items-center gap-2 px-4 py-2 text-sm font-semibold text-white bg-cyan-600 rounded-full shadow-sm 
                            hover:bg-cyan-700 active:scale-95 transition-all duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-cyan-400`}
                          onClick={() => {
                            if (actionMenu) setActionMenu(null);
                            else setActionMenu(inv._id);
                          }}
                        >
                          <span>Action</span>
                          <svg
                            className={`w-4 h-4 transition-transform duration-200 ${
                              actionMenu === inv._id ? "rotate-180" : ""
                            }`}
                            fill="none"
                            stroke="currentColor"
                            strokeWidth={2}
                            viewBox="0 0 24 24"
                          >
                            <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
                          </svg>
                        </button>
                        {actionMenu === inv._id && (
                          <div className="absolute right-0 z-50 mt-2 bg-white border shadow-lg w-48">
                            <button
                              className="w-full px-2 py-1 text-left text-blue-500 hover:bg-gray-100"
                              onClick={() => handleViewSales(inv)}
                            >
                              📄 View Sales
                            </button>
                            <button
                              className="w-full px-2 py-1 text-left text-green-500 hover:bg-gray-100"
                              onClick={() => handleEdit(inv)}
                            >
                              ✏️ Edit
                            </button>
                            <button
                              className="w-full px-2 py-1 text-left text-teal-500 hover:bg-gray-100"
                              onClick={() => handleEditPaymentType(inv)}
                            >
                              💵 Edit Payment Type
                            </button>
                            <button
                              className="w-full px-2 py-1 text-left text-purple-500 hover:bg-gray-100"
                              onClick={() => handleViewPayments(inv)}
                            >
                              💳 View Payments
                            </button>
                            <button
                              className="w-full px-2 py-1 text-left text-indigo-500 hover:bg-gray-100"
                              onClick={() => handleDownloadPDF(inv)}
                            >
                              📥 PDF
                            </button>
                            <button
                              className="w-full px-2 py-1 text-left text-red-500 hover:bg-gray-100"
                              onClick={() => handleDelete(inv._id, inv.source)}
                            >
                              🗑️ Delete
                            </button>
                          </div>
                        )}
                      </td>
                    </tr>
                  ))
                )}
                {currentUsers.length > 0 && (
                  <tr className="font-bold bg-gray-100">
                    <td colSpan="3" className="text-right border">Total :</td>
                    <td className="text-center border">{grandTotal.toFixed(2)}</td>
                    <td className="text-center border"></td>
                    <td className="text-center border"></td>
                    <td className="text-center border"></td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
          <div className="flex flex-col items-start justify-between gap-2 p-2 md:justify-between md:flex-row">
            <span>
              <span>Showing {entriesPerPage * (currentPage - 1) + 1} to {Math.min(entriesPerPage * currentPage, filteredData.length)} of {filteredData.length} entries</span>
            </span>
            <div className='flex justify-between w-full md:w-auto md:gap-2'>
              <button
                className={`flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg transition-all duration-200 shadow-md 
                  ${currentPage === 1 
                    ? "bg-gray-300 text-gray-500 cursor-not-allowed" 
                    : "bg-blue-500 hover:bg-blue-600 text-white cursor-pointer"}`}
                onClick={() => handlePageChange(currentPage - 1)}
                disabled={currentPage === 1}
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
                </svg>
                Previous
              </button>
              <button
                className={`flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-lg transition-all duration-200 shadow-md 
                  ${currentPage === totalPages 
                    ? "bg-gray-300 text-gray-500 cursor-not-allowed" 
                    : "bg-blue-500 hover:bg-blue-600 text-white cursor-pointer"}`}
                onClick={() => handlePageChange(currentPage + 1)}
                disabled={currentPage === totalPages}
              >
                Next
                <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l-7 7 7-7" />
                </svg>
              </button>
            </div>
          </div>
          {/* Modal for Editing Payment Type */}
          {editPaymentModal && (
            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
              <div className="bg-white rounded-lg p-6 w-full max-w-md">
                <h2 className="text-lg font-semibold mb-4">Edit Payment Type</h2>
                <p className="text-sm text-gray-600 mb-4">
                  Invoice: {selectedInvoice.saleCode} ({selectedInvoice.source})
                </p>
                <label className="block font-semibold text-gray-700 mb-2">
                  Select Payment Type
                </label>
                <Select
                  options={paymentTypes}
                  value={newPaymentType}
                  onChange={setNewPaymentType}
                  placeholder="Choose payment type"
                  className="mb-4"
                />
                <div className="flex justify-end gap-2">
                  <button
                    className="px-4 py-2 text-sm text-gray-600 bg-gray-200 rounded hover:bg-gray-300"
                    onClick={() => {
                      setEditPaymentModal(false);
                      setSelectedInvoice(null);
                      setNewPaymentType(null);
                    }}
                  >
                    Cancel
                  </button>
                  <button
                    className="px-4 py-2 text-sm text-white bg-cyan-500 rounded hover:bg-cyan-600"
                    onClick={savePaymentType}
                    disabled={loading}
                  >
                    {loading ? "Saving..." : "Save"}
                  </button>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default PurchaseOverview;